<template>
	<view class="page">
		<headnav leftText="上传作品"></headnav>
		<scroll-view class="page" id="scrollWrap" scroll-y="true" :scroll-top="scrollTop"  @scroll="scroll">
			<view class="pageInner">
			   <headnav leftText="上传作品"></headnav>
			   <view class="info">
				   <view class="title">
						 参赛信息
				   </view>
				   <view class="inner">
					   <view class="dl">
						   <view class="dt">地区：</view>
						   <view class="dd">{{obj.province_name}}</view>
					   </view>
					<!--   <view class="dl">
						   <view class="dt">组别：</view>
						   <view class="dd">社会组</view>
					   </view> -->
					   <view class="dl">
						   <view class="dt">学校/单位：</view>
						   <view class="dd">{{obj.company}}</view>
					   </view>
					   <view class="dl">
						   <view class="dt">手机号：</view>
						   <view class="dd">{{obj.mobile}}</view>
					   </view>
					   <view class="dl" v-show='obj.email'>
						   <view class="dt">邮箱：</view>
						   <view class="dd">{{obj.email}}</view>
					   </view>
				   </view>
			   </view>
			    <view class="nameInput">
					<view class="title">
						<text class="red">*</text>
						作品名称
					</view>
					<view class="ad-inputBox">
						<input type="text" value="" v-model="form_data.title" class="inputBox" placeholder="请输入作品名称"/>
					</view>
				</view>
				<view class="uploadinput">
					<view class="title">
						<text class="red">*</text>
						上传文件
					</view>
					<view class="ad-inputBox">
						<view class="example-body">
							<uni-file-picker  ref="uploadVideo" limit="1" @select="select" file-mediatype="video" title="上传1个视频"></uni-file-picker>
						</view>
					</view>
				</view>
				<view class="nameInput">
					<view class="title">
						指导老师
					</view>
					<view class="ad-inputBox">
						<input type="text" value="" v-model="form_data.guide_teacher" class="inputBox" placeholder="可选填不超过两名用空格隔开"/>
					</view>
					<view class="ts">注意：同一作品的朗诵者不得同时署名该作品的指导教师</view>
				</view>
				<view class="btnWrap">
					<view class="bottomBtn" @tap='submit()'>
						提交作品
					</view>
				</view>
			</view>
			<loginD ref='loginx' @logingetInfo="getInfo"></loginD>
		</scroll-view>
	</view>
	
</template>
<script>
	import mixin from '@/util/mixin.js';  
	import BASE_URL from '../../util/path';
	
	export default {
		mixins: [mixin],
		data() {
			return {
				scrollTop:0,
				progress:0,
				upList:[],
				obj:{
					role_province_id:'',
					province_name:'',
					name:'',
					email:'',
					company:''
				},
				upFile:[
					
				],
				form_data:{
					title:'',
					mobile:'',
					file_data:'str',
					guide_teacher:'',
					role_id:BASE_URL.role_id,
					activity_id:BASE_URL.acitveId
				}
			};
		},
		onLoad(options) {
			this.getUserInfo(true).then((item) => {
				if(item) {
					this.obj = item;	
				}
			});
		},
		methods: {
			select(e) {
				// console.log('select',e);
				const tempFiles = e.tempFiles;
				tempFiles.forEach((item,index) => {
					this.getUpToken(item,index)
				})
			},
			callbackLogin() {
				this.getUserInfo(true).then((item) => {
					if(item) {
						this.obj = item;	
					}
				});
			},
			verifyUp() {
				let bl =  true;	
					
				if(!this.form_data.title) {
					 this.toast('请输入作品名称')
					  bl =  false;
					  return bl
				}
				
				const arrary = this.$refs.uploadVideo.files;
				
				if(arrary.length < 1) {
					this.toast('请确上传作品');
					bl = false;
					return bl;
				}
				
				for(let i = 0; i < arrary.length; i++){
					if(arrary[i].progress != 100) {
						this.toast('请确保文件上传完毕');
						bl = false;
						break;
						return bl;
					}
				}
				
				return bl;
			},
			async submit() {
				uni.showLoading();
				
				const post_data = this.form_data;
				const bl = this.verifyUp();
				//老版本 etag  ext file_key filename
				if(bl) {
					let files = this.$refs.uploadVideo.files;
					const upfiles = files.map((item) => {
						return {
							ext:item.extname,
							file_key:item.file_key,
							name:item.name,
							upload_key:item.upload_key,
							filename:item.name,
							etag:'6826a86ba627b'
						}
					})
					post_data.file_data = JSON.stringify(upfiles);
					post_data.mobile = this.tel;
					post_data.role_username = this.obj.nickname;
					post_data.role_company = this.obj.company;
					post_data.category_id = BASE_URL.category_id;
					post_data.role_schoolname = this.obj.company;
					post_data.role_province_id = this.obj.province;
					const res = await this.$http({
						url:'article/save',
						method:'post',
						data:post_data
					})
					if(res) {
						uni.hideLoading();
						this.toast('创建成功!');
						uni.redirectTo({
							url:'/pages/my/my?id=' + BASE_URL.acitveId
						})
					} else {
						this.toast('创建失败!');
					}
				 }
			},
			verifyUpfile (tempFiles){
				const fileObj = tempFiles.file;
                let bl = true;
				if(fileObj.fileType == 'video') {
					if(fileObj.duration > 600) {
						this.toast('视频时长不能超过10分钟');
						lb = false;
						return bl
					}
				}
				// debugger;
				return bl
			},
			async getUpToken(tempFiles,indexi) {
			    const bl = this.verifyUpfile(tempFiles);
				if (!bl) {
					return;
				}
				const _this = this;
				const res = await this.$http({
					  url:'user/ststoken',
					  method:'post',
					  data:{
						  id:BASE_URL.acitveId,
						  ext:tempFiles.extname
					  }
				})
				
				if(res) {
					const upFormData = {
						'name':name,
						'key':res.data.key,
						'policy':res.data.policy,
						// 'callback':res.data.callback,
						'OSSAccessKeyId': res.data.accessKeyId,
						'success_action_status': '200',
						'upload_key':res.data.upload_key,
						'signature': res.data.signature
					}
					const uploadTask = uni.uploadFile({
						url: BASE_URL.OccAli,
						filePath: tempFiles.path,
						name: 'file',//文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容,即附件信息的接收字段名称
						formData: upFormData,
						timeout:1800000,
						success: (e) => {
							console.log('阿里上传成功',e);
						},
						 fail:(e) => {
							  console.log('阿里上传失败',e);
						 }
					});
				   uploadTask.onProgressUpdate(async (res) => {
					   let progress = await res.progress;
					   let obj = { tempFile:{}};
					   obj.loaded =  progress;
					   obj.total = 100;						   // 
					   obj.tempFile.uuid = tempFiles.uuid;
					   obj.upload_key = upFormData.upload_key;
					   obj.file_key = upFormData.key;
					   this.$refs.uploadVideo.setProgress(obj,indexi);
				   });
				}
			},
			scroll(e) {
				this.scrollTop = e.detail.scrollTop;
			}
		}
	}
</script>

<style lang="scss">
	// .test {
	// 	width: 20rpx;
	// 	background-color: #f24545;
	// 	position: fixed;
	// 	height: 500rpx;
	// }
	page {
		background-color:#f7f7f7;
	}
	
	
	
	.pageInner {
		width: 100%;
		padding-left: 34rpx;
		padding-right: 34rpx;
		padding-bottom: 34rpx;
		background-color: #f7f7f7;
	}
	.uploadinput {
		padding: 28rpx;
		border-radius: $uni-radius;
		background-color: #fff;
		margin-bottom: 30rpx;
	}
	#scrollWrap {
		 padding-top: $uni-pading;
		 width: 100%; 
	}
	.info {
		.title {
			font-size: 30rpx;
			font-weight: bold;
			padding: 26rpx;
			
		}
		.inner {
			background-color: #fff;
			border-radius: $uni-radius;
			background-color: #fff;
			padding: 36rpx 25rpx 10rpx 25rpx;
			.dl {
				display: flex;
				font-size: 28rpx;
				margin-bottom: 26rpx;
				.dt {
					width: 154rpx;
					flex:none;
				}
			}
		}
		margin-bottom: 30rpx;;
	}
	.red {
		color:red;
		margin-right: 10rpx;
	}
	.nameInput {
		padding: 32rpx;
		background-color: #fff;
		border-radius: $uni-radius;
		margin-bottom: 28rpx;
		.title {
			margin-bottom: 20rpx;
		}
		.ad-inputBox {
			border-radius:12rpx;
			background-color: #f7f7f7 !important;
		}
		.inputBox {
			font-size: 30rpx;
			padding: 27rpx 38rpx;
		}
		.ts {
			font-size: 24rpx;
			padding-top: 20rpx;
			color:#cccccc;
		}
	}
	.btnWrap {
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		display: flex;
		justify-content: center;
		.bottomBtn {
			@include bottomBtn
		}
	}
	
     .example-body {
		 
	 }
  
   
</style>
